<template>
  <view class="payment-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <text class="title">确认支付</text>
    </view>
    
    <!-- 支付金额 -->
    <view class="payment-amount">
      <text class="label">支付金额</text>
      <text class="amount">¥{{orderInfo.totalPrice.toFixed(2)}}</text>
    </view>
    
    <!-- 支付方式 -->
    <view class="payment-methods">
      <text class="section-title">支付方式</text>
      
      <view class="payment-method-item" @click="selectPaymentMethod('wechat')">
        <view class="method-info">
          <image src="/static/icon/微信支付.png" mode="aspectFit"></image>
          <text>微信支付</text>
        </view>
        <radio :checked="paymentMethod === 'wechat'" color="#0086ff" />
      </view>
      
      <view class="payment-method-item" @click="selectPaymentMethod('alipay')">
        <view class="method-info">
          <image src="/static/icon/支付宝.png" mode="aspectFit"></image>
          <text>支付宝</text>
        </view>
        <radio :checked="paymentMethod === 'alipay'" color="#0086ff" />
      </view>
      
      <view class="payment-method-item" @click="selectPaymentMethod('unionpay')">
        <view class="method-info">
          <image src="/static/icon/银联.png" mode="aspectFit"></image>
          <text>银联支付</text>
        </view>
        <radio :checked="paymentMethod === 'unionpay'" color="#0086ff" />
      </view>
    </view>
    
    <!-- 底部支付按钮 -->
    <view class="footer">
      <view class="pay-btn" @click="confirmPayment">
        <text>立即支付</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      orderInfo: {
        totalPrice: 0
      },
      paymentMethod: 'wechat' // 默认支付方式
    }
  },
  onLoad(options) {
    this.orderId = options.orderId || '';
    
    // 获取订单信息
    if (this.orderId) {
      const orderList = uni.getStorageSync('orderList');
      if (orderList) {
        const orders = JSON.parse(orderList);
        const order = orders.find(item => item._id === this.orderId);
        if (order) {
          this.orderInfo = order;
        }
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    selectPaymentMethod(method) {
      this.paymentMethod = method;
    },
    
    confirmPayment() {
      // 显示加载中
      uni.showLoading({
        title: '支付处理中...'
      });
      
      // 模拟支付过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 更新订单状态
        const orderList = uni.getStorageSync('orderList');
        if (orderList) {
          const orders = JSON.parse(orderList);
          const orderIndex = orders.findIndex(item => item._id === this.orderId);
          
          if (orderIndex !== -1) {
            orders[orderIndex].status = 'paid';
            orders[orderIndex].paymentMethod = this.paymentMethod;
            orders[orderIndex].paymentTime = new Date().toISOString();
            
            uni.setStorageSync('orderList', JSON.stringify(orders));
            
            // 清空购物车
            uni.removeStorageSync('cartData');
            
            // 显示支付成功提示
            uni.showToast({
              title: '支付成功',
              icon: 'success',
              duration: 2000,
              success: () => {
                // 跳转到订单列表页
                setTimeout(() => {
                  uni.redirectTo({
                    url: '/pages/order/order-list'
                  });
                }, 2000);
              }
            });
          }
        }
      }, 1500);
    }
  }
}
</script>

<style lang="scss">
.payment-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  
  .back-btn {
    margin-right: 20rpx;
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.payment-amount {
  background-color: #fff;
  padding: 40rpx 20rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  .amount {
    font-size: 60rpx;
    font-weight: bold;
    color: #333;
  }
}

.payment-methods {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx;
  
  .section-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .payment-method-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .method-info {
      display: flex;
      align-items: center;
      
      image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      
      text {
        font-size: 28rpx;
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .pay-btn {
    background-color: #0086ff;
    color: #fff;
    padding: 15rpx 40rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    width: 90%;
    text-align: center;
  }
}
</style>